import React, { Component } from 'react';
import './LeftList.scss'
import Bridge from './Bridge';
import {category_list} from '../utils/api'
import RightList from './RightList';

class LeftList extends Component {
    constructor(props){
        super(props);
        this.state={
            currentIndex:0,
            id:0,
            arr1:[],
            arr:['护肤','彩妆','香水','腕表','箱包','手机数码','珠宝首饰','眼镜文具','服饰鞋靴','生活','母婴','酒水','食品软饮','特卖商品']
        }
    }
    handleClick(index){
        this.setState({
            currentIndex:index,
        })
    }
    componentDidMount(){
        category_list().then((res)=>{
            this.setState({arr1:res.data.list})
        })
    }
    render() {
        return (
            <>
            <div className='LeftList'>
                {
                    this.state.arr1.map((item,index)=>{
                        return (<div className={`leftitem ${this.state.currentIndex==index?'active':''}`} onClick={()=>{this.handleClick(index)}}  key={index}  >{item.name}</div>)
                    })
                }
            </div>
            <Bridge count={this.state.arr1[this.state.currentIndex]} index={this.state.currentIndex}></Bridge>
            </>
        );
        
    }
}

export default LeftList;